<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>填写贷款</title>
    <script th:src="@{/script/jquery-1.12.4.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/apply.css}"/>
    <script th:src="@{/script/bootstrap.js}"></script>
    <script th:src="@{/bootstrap/js/city-picker.data.js}"></script>
    <script th:src="@{/bootstrap/js/city-picker.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/css/city-picker.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrapValidator.min.css}"/>
    <script th:src="@{/script/bootstrapValidator.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <script th:src="@{/script/common.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script type="text/javascript">
        // 上下滚动
        function AutoScroll(obj) {
            $(obj).find("ul:first").animate({
                    marginTop: "-25px"
                },
                500,
                function () {
                    $(this).css({
                        marginTop: "0px"
                    }).find("li:first").appendTo(this);
                });
        }

        $(document).ready(function () {
            var myar = setInterval('AutoScroll("#scrollDiv")', 3000);
            $("#scrollDiv").hover(function () {
                    clearInterval(myar);
                },
                function () {
                    myar = setInterval('AutoScroll("#scrollDiv")', 3000)
                }); //当鼠标放上去的时候，滚动停止，鼠标离开的时候滚动开始
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div th:replace="loan/public::head"></div>
    </div>
    <div class="row">
        <a style="text-decoration: none;
    margin-left: 202px;
    margin-top: 55px;
    display: inline-block;" th:href="@{/loan/loanmian}">首页 > <a style="text-decoration: none;" th:href="@{/loan/credit_3}">业主贷 > </a><span
                style="color: #D0D0D0">填写贷款申请<span>
        <div class="creditapply">
            <h3 class="xiangqing">填写贷款申请</h3>
            <div>
                <form class="form-horizontal" id="form" style="margin-left: 218px;
}" th:action="@{/loan/apply3}">
                    <div class="loanright" style=" float: left;margin-top: 40px;
    width: 490px;">
                        <div class="form-group">
                            <label class="col-md-2 control-label">真实姓名</label>
                            <div class="col-md-6">
                                <input class="form-control" name="name" type="text"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">电话</label>
                            <div class="col-md-6">
                                <input class="form-control" name="phone" type="text"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">是否有房</label>
                            <div class="col-md-6" style="    margin-top: 23px;">
                                <input id="house" name="materials" style="width: 50px" type="radio"><span>有房</span>
                                <input id="housenull" name="materials" style="width: 50px" type="radio"><span>无房</span>
                            </div>
                        </div>
                        <div class="panel panel-default" id="houseimf" style="margin-left: 157px;
    margin-right: -83px;display: none">
                                    <div class="panel-heading">房信息<a th:href="@{/loan/addhouse}"><button class="btn btn-info" style="margin-left: 246px;"
                                                                                                         type="button">添加房</button></a></div>

                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>所在城市</th>
                                            <th>详细地址</th>
                                            <th>拥有房时间</th>
                                            <th>房产证</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="active" th:each="entry:${session.houseimf}" th:if="${session.housenull == 1}">
                                            <th scope="row" th:text="${entry.houseaddress}"></th>
                                            <td th:text="${#strings.abbreviate(entry.housedata,10)}"></td>
                                            <td th:text="${entry.housedate}"></td>
                                            <td><img style="width: 80px;height: 50px;" th:src="@{${entry.houseprove}}"/></td>
                                        </tr>
                                        <tr class="active" th:each="entry:${session.houseimf}" th:if="${session.housenull == 0}">
                                            <th colspan="4" scope="row">当前没有房信息</th>
                                        </tr>
                                        </tbody>
                                        <tfoot>
                                        </tfoot>
                                    </table>
                                </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">身份证号</label>
                            <div class="col-md-6">
                                <input class="form-control" name="idcard" type="text"/>
                            </div>
                        </div>
                        <div id="distpicker" style="margin-left: 14px;">
                            <div class="form-group">
                                <label>所在城市</label>
                                <div style="position: relative;    text-align:-webkit-center;left: 19px;">
                                    <input class="form-control" data-toggle="city-picker" id="address" name="address" placeholder="所在城市" readonly type="text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2 control-label">月收入</label>
                            <select class="combobox" name="monthmoney" style="margin-left: 16px;">
                                <option value="小于3000">小于3000</option>
                                <option value="3000-6000">3000-6000</option>
                                <option value="6000-9000">6000-9000</option>
                                <option value="9000-1万以上">9000-1万以上</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-2">
                            <button class="btn btn-primary" id="btn" style="    margin-left: 129px;
    margin-top: 30px;
    margin-bottom: 40px;" type="submit">立即申请</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
</div>
</div>
</body>

<script type="text/javascript">
    window.onload = function () {
        $("#form").bootstrapValidator({
            //默认提示
            message: 'This value is not valid',
            // 表单框里右侧的icon
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            submitHandler: function (validator, form, submitButton) {
                console.log(1);
                // 表单提交成功时会调用此方法
                // validator: 表单验证实例对象
                // form jq对象 指定表单对象
                // submitButton jq对象 指定提交按钮的对象
            },
            fields: {
                name: {
                    message: '真实姓名验证失败',
                    validators: {
                        notEmpty: {   //不能为空
                            message: '真实姓名不能为空'
                        }
                    }
                },
                phone: {
                    message: '电话号验证失败',
                    validators: {
                        notEmpty: {
                            message: '电话号不能为空'
                        },
                        regexp: {  //正则验证
                            regexp: /^1\d{10}$/,
                            message: '请输入正确的电话号'
                        }
                    }
                },
                idcard: {
                    validators: {
                        notEmpty: {
                            message: '身份证号码不能为空！'
                        },
                        regexp: {
                            regexp: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                            message: '身份证号码格式不正确，为15位和18位身份证号码！'
                        },
                        callback: {/*自定义，可以在这里与其他输入项联动校验*/
                            message: '身份证号码无效！',
                            callback: function (value, validator, $field) {
                                //15位和18位身份证号码的正则表达式
                                var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
                                //如果通过该验证，说明身份证格式正确，但准确性还需计算
                                var idCard = value;
                                if (regIdCard.test(idCard)) {
                                    if (idCard.length == 18) {
                                        var idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //将前17位加权因子保存在数组里
                                        var idCardY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; //这是除以11后，可能产生的11位余数、验证码，也保存成数组
                                        var idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
                                        for (var i = 0; i < 17; i++) {
                                            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
                                        }
                                        var idCardMod = idCardWiSum % 11;//计算出校验码所在数组的位置
                                        var idCardLast = idCard.substring(17);//得到最后一位身份证号码
                                        //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
                                        if (idCardMod == 2) {
                                            if (idCardLast == "X" || idCardLast == "x") {
                                                return true;
                                                //alert("恭喜通过验证啦！");
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        } else {
                                            //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
                                            if (idCardLast == idCardY[idCardMod]) {
                                                //alert("恭喜通过验证啦！");
                                                return true;
                                            } else {
                                                return false;
                                                //alert("身份证号码错误！");
                                            }
                                        }
                                    }
                                } else {
                                    //alert("身份证格式不正确!");
                                    return false;
                                }
                            }
                        }
                    }
                },

            }
        });
    }

</script>
<script type="text/javascript">
    $('input:radio[name="materials"]').change(function () {
        if ($("#house").is(":checked")) {
            var div1 = document.getElementById('houseimf');
            div1.style.display = "block";
        }
        if ($("#housenull").is(":checked")) {
            var div1 = document.getElementById('houseimf');
            div1.style.display = "none";
        }
    })
</script>

</html>